import { ImageResponse } from 'next/og';
import { t } from '@/i18n';
import { api, safe } from '@/lib/api';
import { displayValue } from '@/lib/format';
import { OG_INK2, OG_INK3, OG_RULE, OG_SIZE_H, OG_SIZE_W, OgFrame, OgWordmark } from '../../og-shared';

export const alt = 'Country statistics on CountryAtlas';
export const size = { width: OG_SIZE_W, height: OG_SIZE_H };
export const contentType = 'image/png';
export const revalidate = 3600;

/** Per-country social image: flag + name + three headline values (population, GDP per capita, life expectancy). */
export default async function CountryOgImage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const data = await safe(api.country(slug));
  const c = data?.country;
  const name = c?.name ?? slug.replace(/-/g, ' ');
  const pick = (id: string) => data?.headline.find((m) => m.indicator === id && m.has_data) ?? null;
  const facts = [pick('population'), pick('gdp-per-capita'), pick('life-expectancy')].filter((m): m is NonNullable<typeof m> => !!m).slice(0, 3);
  const sub = [c?.capital, c?.region_name, c?.income_name].filter(Boolean).join(' · ');
  return new ImageResponse(
    (
      <OgFrame>
        <OgWordmark size={28} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, marginTop: 56 }}>
          <div style={{ fontSize: 120, lineHeight: 1, display: 'flex' }}>{c?.flag ?? ''}</div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontSize: 68, fontWeight: 600, letterSpacing: -1.5, lineHeight: 1.05 }}>{name}</div>
            {sub ? <div style={{ marginTop: 10, fontSize: 24, color: OG_INK2 }}>{sub}</div> : null}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 48, marginTop: 'auto', paddingTop: 24, borderTop: `1px solid ${OG_RULE}` }}>
          {facts.length === 0 ? (
            <div style={{ fontSize: 24, color: OG_INK2 }}>{t('country.description', { name }).split(':')[1]?.trim() ?? ''}</div>
          ) : null}
          {facts.map((m) => (
            <div key={m.indicator} style={{ display: 'flex', flexDirection: 'column' }}>
              <div style={{ fontSize: 18, color: OG_INK3, textTransform: 'uppercase', letterSpacing: 1.5 }}>{m.indicator_name ?? m.indicator}</div>
              <div style={{ fontSize: 44, fontWeight: 600, marginTop: 6 }}>{displayValue(m.value, m, m.formatted)}</div>
              <div style={{ fontSize: 18, color: OG_INK3, marginTop: 2 }}>{String(m.year ?? '')}</div>
            </div>
          ))}
        </div>
        <div style={{ position: 'absolute', right: 64, bottom: 24, fontSize: 20, color: OG_INK3 }}>{t('og.site')}</div>
      </OgFrame>
    ),
    { ...size },
  );
}